import React from 'react'
import { useNavigate } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import ErrorBoundary from '../../components/ErrorBoundary'
import styles from './index.module.css'

const Profile = () => {
  const navigate = useNavigate()

  const handleFamilyManagement = () => {
    // 跳转到家庭管理页面
    navigate('/family')
  }

  const handleServiceItem = (service) => {
    // 处理服务项点击
    console.log('点击服务:', service)
    switch (service) {
      case '挂号订单':
        navigate('/orders/registration')
        break
      case '医嘱订单':
        navigate('/orders/doctor-advice')
        break
      case '就诊记录':
        navigate('/records/consultation')
        break
      case '门诊病历':
        navigate('/records/outpatient')
        break
      case '我的关注':
        navigate('/favorites')
        break
      case '地址管理':
        navigate('/address')
        break
      case '意见反馈':
        navigate('/feedback')
        break
      case '帮助中心':
        navigate('/help')
        break
      case '信用守约':
        navigate('/credit')
        break
      case '关于我们':
        navigate('/about')
        break
      case '设置':
        navigate('/settings')
        break
      default:
        break
    }
  }

  const handleQRCode = () => {
    // 显示二维码
    console.log('显示二维码')
  }

  return (
    <div className={styles.profilePage}>
      {/* 顶部状态栏 */}
      <div className={styles.statusBar}>
        <div className={styles.time}>12:30</div>
        <div className={styles.statusIcons}>
          <div className={styles.signalIcon}>📶</div>
          <div className={styles.wifiIcon}>📶</div>
          <div className={styles.batteryIcon}>🔋</div>
        </div>
      </div>

      {/* 应用标题栏 */}
      <div className={styles.appHeader}>
        <div className={styles.appTitle}>智慧医院平台</div>
        <div className={styles.headerActions}>
          <div className={styles.actionBtn}>⋯</div>
          <div className={styles.actionBtn}>🎯</div>
        </div>
      </div>

      {/* 用户信息区域 */}
      <div className={styles.userProfile}>
        <div className={styles.avatar}>
          <img src="/api/avatar" alt="用户头像" onError={(e) => {
            e.target.style.display = 'none'
            e.target.nextSibling.style.display = 'flex'
          }} />
          <div className={styles.avatarPlaceholder}>👧</div>
        </div>
        <div className={styles.userInfo}>
          <div className={styles.username}>StarYun</div>
          <div className={styles.familyManagement} onClick={handleFamilyManagement}>
            家庭管理(2人管理中) &gt;
          </div>
        </div>
      </div>

      {/* 主要用户信息卡片 */}
      <div className={styles.mainCard}>
        <div className={styles.cardContent}>
          <div className={styles.userName}>王*柯 (本人)</div>
          <div className={styles.registrationNo}>登记号: 2015****10</div>
        </div>
        <div className={styles.qrCode} onClick={handleQRCode}>
          <div className={styles.qrIcon}>🔲</div>
        </div>
      </div>

      {/* 诊疗记录区域 */}
      <div className={styles.section}>
        <div className={styles.sectionTitle}>诊疗记录</div>
        <div className={styles.serviceGrid}>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('挂号订单')}>
            <div className={styles.serviceIcon}>📋</div>
            <div className={styles.serviceText}>挂号订单</div>
          </div>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('医嘱订单')}>
            <div className={styles.serviceIcon}>💊</div>
            <div className={styles.serviceText}>医嘱订单</div>
          </div>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('就诊记录')}>
            <div className={styles.serviceIcon}>🏥</div>
            <div className={styles.serviceText}>就诊记录</div>
          </div>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('门诊病历')}>
            <div className={styles.serviceIcon}>📄</div>
            <div className={styles.serviceText}>门诊病历</div>
          </div>
        </div>
      </div>

      {/* 服务设置区域 */}
      <div className={styles.section}>
        <div className={styles.sectionTitle}>服务设置</div>
        <div className={styles.serviceGrid}>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('我的关注')}>
            <div className={styles.serviceIcon}>⭐</div>
            <div className={styles.serviceText}>我的关注</div>
          </div>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('地址管理')}>
            <div className={styles.serviceIcon}>📍</div>
            <div className={styles.serviceText}>地址管理</div>
          </div>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('意见反馈')}>
            <div className={styles.serviceIcon}>💬</div>
            <div className={styles.serviceText}>意见反馈</div>
          </div>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('帮助中心')}>
            <div className={styles.serviceIcon}>❓</div>
            <div className={styles.serviceText}>帮助中心</div>
          </div>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('信用守约')}>
            <div className={styles.serviceIcon}>🏆</div>
            <div className={styles.serviceText}>信用守约</div>
          </div>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('关于我们')}>
            <div className={styles.serviceIcon}>ℹ️</div>
            <div className={styles.serviceText}>关于我们</div>
          </div>
          <div className={styles.serviceItem} onClick={() => handleServiceItem('设置')}>
            <div className={styles.serviceIcon}>⚙️</div>
            <div className={styles.serviceText}>设置</div>
          </div>
        </div>
      </div>

      {/* 底部导航栏 */}
      <div className={styles.bottomNav}>
        <div className={styles.navItem} onClick={() => navigate('/home')}>
          <div className={styles.navIcon}>🏠</div>
          <div className={styles.navText}>诊疗首页</div>
        </div>
        <div className={styles.navItem} onClick={() => navigate('/website')}>
          <div className={styles.navIcon}>☁️</div>
          <div className={styles.navText}>微官网</div>
        </div>
        <div className={styles.navItem} onClick={() => navigate('/message')}>
          <div className={styles.navIcon}>💬</div>
          <div className={styles.navText}>消息中心</div>
        </div>
        <div className={`${styles.navItem} ${styles.active}`} onClick={() => navigate('/profile')}>
          <div className={styles.navIcon}>👤</div>
          <div className={styles.navText}>我的</div>
        </div>
      </div>
    </div>
  )
}

export default Profile
